<template>
  <div class="hot-search-wrapper">
      <header class="hot-search-header">
          <span>
              热搜榜
          </span>

          <span>
              <!-- <v-icon>
                    mdi-play
              </v-icon> 播放 -->
          </span>
      </header>
      <v-divider></v-divider>
      <ul class="hot-search-list"> 
          <li class="hot-search-item"  v-for="(item,i) in rankData" :key="i" @click="searchKeyword(item)">
            <span class="rank-index">{{i+1}} </span> {{item.first}}
          </li>
      </ul>
      <div class="hot-search-more" @click="more = !more">{{ more ? '收起' : '展开' }}更多热搜</div>
  </div>
</template>

<script>

import api from '@/api/index.js'

export default {
    name: 'HotSearchRank',
    data(){
        return {
            hotSearchData: [],
            more: false
        }
    },
    computed: {
        rankData(){
            if(this.more){
                return this.hotSearchData;
            }else{
                return this.hotSearchData.slice(0, 6);
            }
        }
    },
    methods: {

        searchKeyword(data){

            this.$emit('keyword-click', data.first);
        },

        getHotSearch(){
            return api.getHotSearch().then(res => {
                console.log('hotSearch ----- ');
                console.log(res.data.result.hots);
                this.hotSearchData = res.data.result.hots;
            })
        }
    },
    created(){
        this.getHotSearch();
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global';
    .hot-search-wrapper {
        padding: px2rem(10);
        .hot-search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: px2rem(32);
            @include defaultTitle;
        }

        .hot-search-list {
            .hot-search-item {
                display: inline-block;
                margin: px2rem(10) 0;
                width: 50%;
                @include defaultFontSize;

                .rank-index {
                    margin-right: px2rem(6);
                    color: #888;
                }

                &:first-child {
                    .rank-index {
                        color: rgb(223, 68, 41);
                    }
                }

                &:nth-child(2) {
                    .rank-index {
                        color: rgb(221, 81, 56);
                    }
                }

                &:nth-child(3) {
                    .rank-index {
                        color: rgb(207, 90, 70);
                    }
                }
            }
        }

        .hot-search-more {
            height: px2rem(32);
            line-height: px2rem(32);
            text-align: center;
            color: #565656;
            transition: background .2s;
            @include defaultTitle;

            &:active {
                background-color: #eee;
            }
        }
    }
</style>